<template>
	<view>
		<view class="user-top">
			<view class="user-top-content">
				<image :src="userInfo.avatarUrl" class="user-top-content-image"></image>
				<view class="user-top-title">
					<view class="user-top-title-top">{{userInfo.nickName}}</view>
					<view v-if="vipInfo.vip == 0">未开通会员</view>
					<view v-else>
						<view v-if="vipInfo.expiretime == 0">永久会员</view>
						<view v-else>会员{{vipInfo.expiretime}}到期</view>
					</view>

				</view>
			</view>
			<view class="user-top-vip">
				<view class="user-top-vip-l">
					<view class="icon icon-tequan"></view>
					<view class="user-top-vip-l-title">开通会员，享更多特权</view>
				</view>
				<navigator open-type="navigate" url="/pages/mine/vip/index" v-if="vipInfo.vip == 0" class="user-top-vip-button">立即开通</navigator>
				<view v-else class="user-top-vip-button">已开通</view>
			</view>
		</view>
		<uni-list>
			<navigator open-type="navigate" url="/pages/mine/collection/index" hover-class="none">
				<uni-list-item title="我的收藏" :thumb="static_media.img02"></uni-list-item>
			</navigator>
			<navigator open-type="navigate" url="/pages/mine/records/index" hover-class="none">
				<uni-list-item title="购买记录" :thumb="static_media.img01"></uni-list-item>
			</navigator>
		</uni-list>
	</view>
</template>

<script>
import { mapState } from 'vuex'
import uniList from '@/components/uni-list/uni-list.vue'
import uniListItem from '@/components/uni-list-item/uni-list-item.vue'
	import util from '@/lib/utils/index.js'
let jweixin = require('jweixin-module');
export default {
  data () {
    return {
		vipInfo:{},
		showModal:false,
		vipList:[],
		vipId:0,//
    }
  },
  onLoad () {},
  onShow () {
	  this.getIsVip();
  },
  mounted () {},
  computed: {
    ...mapState(['userInfo']),
    static_media () {
      return {
		  img01: '/static/img/user-icon1.png',
		  img02: '/static/img/user-icon2.png',
		  img07: this.$lib.$config.localMedia + '/static/img/vip.png',
      }
    }
  },
  components: {
    uniList,
    uniListItem
  },
  methods: {
	  async getIsVip(){
		  let res = await this.$lib.$http.post({
			  url:this.$lib.$urlMap.isVip,
			  data:{},
			  needLogin:true
		  })
		  if(res.code == 1){
			  this.vipInfo = res.data
			  if(this.vipInfo.expiretime ==0){
			  	return
			  }
			  this.vipInfo.expiretime = util.timestampToTime(this.vipInfo.expiretime)
		  }
	  },
  }
}
</script>

<style>
.lz-top_view {
	background: linear-gradient(90deg, #ffd206 0%, #ffe66e 100%);
}

page {
	background: rgb(246, 247, 249);
}
.user-top {
	background:#2f4dff url("") no-repeat top right;
	height: 184px;
}
.user-top .index-head-l .icon {
	padding-left: 4px;
	font-size: 18px;
}
.user-top-icon .icon {
	font-size: 24px;
	text-align: right;
}
.user-top-content {
	display: flex;
	width: 90%;
	margin: 0 auto;
	padding: 25px 0;
	position: relative;
}
.user-top-content-image  {
	width: 63px;
	height: 63px;
	border-radius: 50%;
	margin-right: 12px;
	border: solid 2px #fff;
}
.user-top-title {
	flex: 1;
	display: flex;
	align-items: flex-start;
	color: #fff;
	font-size: 14px;
	flex-direction: column;
	justify-content: center;
}
.user-top-title-top{
	font-size: 17px;
	margin-bottom: 4px;
}
.user-top-vip {
	background: url("") no-repeat;
	height: 72px;
	padding: 0 26px 11px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.user-top-vip-l {
	display: flex;
	align-items: center;
}
.user-top-vip-l .icon{
	font-size: 19px;
	margin-right: 5px;
}
.user-top-vip-l-title{
	padding-top: 3px;
	font-size: 13px;
}
.user-top-vip-button{
	background: #4c2a16;
	color: #fff7db;
	font-size: 13px;
	padding: 7px 16px;
	border-radius: 23px;
}
</style>
